<template>
  <view>
    <view class="top-box bg-primary">
      <view class="wrap">
        <swiper
          class="swiper"
          circular
          :indicator-dots="indicatorDots"
          :autoplay="autoplay"
          :interval="interval"
          :duration="duration"
        >
          <swiper-item
            class="swiperBox"
            v-for="(item, index) in bannerListData"
            :key="index"
          >
            <image
              :src="item.bannerUrl"
              class="w-100 h-100"
              mode="aspectFill"
            ></image>
          </swiper-item>
        </swiper>
      </view>
      <view class="flex align-center w-100 p-20">
        <!-- 	<view class="bg-white flex align-center radius-25 w-100 zIndex search-box">
					<view class="align-center">
						<image src="/static/index/search.png" class="search"></image>
					</view>
					<view class="position-r flex-1 m-l-10">
						<input type="text" v-model="keyword" readonly placeholder='点击输入关键字搜索' border="none" class="search-text" />
					</view>
				</view> -->
        <u-search
          placeholder="点击输入关键字搜索"
          :showAction="false"
          v-model="keyword"
          @search="searchKeyword"
        ></u-search>
      </view>
    </view>
    <view class="p-10">
      <view class="flex justify-between">
        <!-- 	<view class="b-r-10 flex-1 bg-Box position-r" @click="toGoodsList(dataListArea[0])">
					<image src="/static/xyc/homeImg.png" class="logoBox"></image>
					<view class="font-24 font-b color-w m-l-15 p-l-15 p-r-15 bg-yellow b-r-20 logoJoin">立即参与</view>
					<view class="font-46 font-b p-l-20 p-r-30 p-b-30 logoName">
						<p  v-if="dataListArea[0]">{{dataListArea[0].areaName.slice(0,2)}}</p>
						<p  v-if="dataListArea[0]">{{dataListArea[0].areaName.slice(2)}}</p>
					</view>
				</view>
				<div class="flex-1 m-l-10">
					<view class="b-r-10 bg-Box zq-img" @click="toGoodsList(dataListArea[1])">
						<view class="font-40 font-b p-30" v-if="dataListArea[1]">{{ dataListArea[1].areaName }}</view>
						<view class="font-24 color-w font-b m-l-15 p-l-15 p-r-15 bg-yellow b-r-20">立即参与</view>
					</view>
					<view class="b-r-10 m-t-10 zq-img bg-Box" @click="toGoodsList(dataListArea[2])">
						<view class="font-40 font-b p-30" v-if="dataListArea[2]">{{ dataListArea[2].areaName }}</view>
						<view class="font-24 color-w font-b m-l-15 p-l-15 p-r-15 bg-yellow b-r-20">立即参与</view>
					</view>
				</div> -->
        <div class="flex-1 flex justify-between" v-if="false">
          <view
            class="b-r-10 bg-Box flex-1 p-b-10"
            @click="toGoodsList(dataListArea[0])"
          >
            <view class="flex">
              <view class="font-40 font-b p-30" v-if="dataListArea[0]">{{
                dataListArea[0].areaName
              }}</view>
              <image
                src="/static/xyc/homeImg.png"
                class="m-l-10 m-t-20 logoBox1"
              ></image>
            </view>
            <view
              class="font-24 color-w boxJoin font-b m-l-15 p-l-15 p-r-15 bg-yellow b-r-20"
              >立即参与</view
            >
          </view>
          <view
            class="b-r-10 bg-Box flex-1 p-b-10 m-l-10"
            @click="toGoodsList(dataListArea[1])"
          >
            <view class="flex">
              <view class="font-40 font-b p-30" v-if="dataListArea[1]">{{
                dataListArea[1].areaName
              }}</view>
              <image
                src="/static/xyc/homeImg.png"
                class="m-l-10 m-t-20 logoBox1"
              ></image>
            </view>
            <view
              class="font-24 color-w boxJoin font-b m-l-15 p-l-15 p-r-15 bg-yellow b-r-20"
              >立即参与</view
            >
          </view>
        </div>
      </view>
      <scroll-view scroll-y style="height: 100%">
        <view class="flex justify-between flex-wrap margin-top-sm">
          <view
            class="bg-white radius-5 margin-bottom-sm goods-item flex flex-direction"
            v-for="(item, index) in productList"
            :key="index"
            @click="toProductDetails(item)"
          >
            <view class="goods-img p-10 border-box">
              <image :src="item.mainImageUrl" class="goods-img b-r-10"></image>
            </view>
            <view class="p-20 flex flex-direction justify-between flex-sub">
              <view class="text-cut2">
                <text class="font-26 text-bold">{{ item.productName }}</text>
              </view>
              <view class="margin-top-sm">
                <view class="flex align-center">
                  <view class="flex align-center text-theme text-bold">
                    <text class="font-24">￥</text>
                    <text class="font-30">{{ item.price }}</text>
                  </view>
                  <view
                    v-if="item.price != item.productPrice"
                    class="margin-right-sm text-through font-24 m-l-10 color-gray"
                    >￥{{ item.productPrice }}</view
                  >
                </view>
                <view
                  class="flex flex-end align-center text-black9 m-t-10 font-20"
                >
                  <text
                    class="buyBtn p-l-20 p-r-20 p-t-4 p-b-4 b-r-10 bg-yellow color-w"
                    >购买</text
                  >
                </view>
              </view>
            </view>
          </view>
        </view>
        <u-loadmore
          :status="status"
          class="padding-bottom text-center color-gray"
        />
      </scroll-view>
    </view>

    <!-- 广告引导页 -->
    <u-popup
      mode="center"
      :show="guideBool"
      bgColor="transparent"
      :cancelShow="false"
    >
      <view class="bg-white guide-page">
        <guidePage @success="successGuidePage" />
      </view>
    </u-popup>

    <!-- app更新 -->
    <app-update
      ref="popupAPP"
      @noNeed="noNeed"
      :downServerData="downServerData"
      @cancelDownload="cancelDownload"
      @houTaiDownload="houTaiDownload"
    ></app-update>
    <!-- /app更新 -->
  </view>
</template>

<script>
import { mapState } from "vuex";
import { getMsgUnread } from "@/common/api/message.js";
import {
  productCate,
  productList,
  bannerList,
  productArea,
} from "@/common/api/product.js";
import { lastVersion } from "@/common/api/api.js";
import appUpdate from "@/components/app-update/appUpdate.vue";
import config from "@/common/config/config.js";
import { customerInfo } from "@/common/api/customer.js";
import guidePage from "@/pages/my/advertising/guidePage.vue";
import { checkGuidePage, finishGuidePage } from "@/common/api/advertising.js";
export default {
  components: {
    appUpdate,
    guidePage,
  },
  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      list: [
        {
          image: "https://www.liyacq.cn/banner3.jpg",
          title: "昨夜星辰昨夜风，画楼西畔桂堂东",
        },
        {
          image: "https://www.liyacq.cn/banner2.jpg",
          title: "身无彩凤双飞翼，心有灵犀一点通",
        },
        {
          image: "https://www.liyacq.cn/banner1.jpg",
          title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
        },
      ],
      baseList: [],
      current: 0, //移动滑块所在
      tabIndex: 0,
      background: {
        backgroundColor: "#E60000",
      },
      pageNo: 0,
      status: "loading",
      goodsList: [],
      cateList: [], // 商品分类
      scrollTop: 0,
      downServerData: {},
      productCateList: [],
      productList: [],
      keyword: "",
      totalNum: null,
      bannerListData: [],
      guideBool: false,
      dataListArea: [],
    };
  },
  computed: {
    ...mapState(["ycToken"]),
  },
  watch: {
    keyword: {
      handler() {},
    },
  },
  async onLoad() {
    // #ifdef APP-PLUS
    // 检查更新
    this.getServerNo();
    // #endif
  },
  onShow() {
    this.getBannerList();
    this.pageNo = 0;
    this.getProductArea();
    this.getProductList();
    // this.getCustomerInfo();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.productList = [];
    this.pageNo = 0;
    this.getProductList();
    // 关闭下拉刷新
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 800);
  },
  onReachBottom() {
    if (this.status != "nomore") {
      this.getProductList();
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
    if (e.scrollTop > 44) {
      this.showToTop = true;
    } else {
      this.showToTop = false;
    }
    this.handleScrollStart();
  },
  methods: {
    // 获取用户信息
    getCustomerInfo() {
      customerInfo().then((res) => {
        this.userInfo = res.data.user || {};
      });
    },
    //检查是否展示引导页
    checkGuidePageFun() {
      checkGuidePage().then((res) => {
        if (res.code === 200) {
          if (!res.data.length) {
            this.guideBool = true;
            uni.hideTabBar();
          } else {
            this.guideBool = false;
          }
        }
      });
    },
    //成功看完引导页
    successGuidePage() {
      this.guideBool = false;
      uni.showTabBar();
      finishGuidePage().then((res) => {
        if (res.code === 200) {
        }
      });
    },
    // 获取banner列表
    getBannerList() {
      bannerList().then((res) => {
        if (res.code === 200) {
          this.bannerListData = res.data;
        }
      });
    },
    // 获取未读消息数量
    getMessageTotal() {
      getMsgUnread().then((res) => {
        if (res.code === 200) {
          if (res.data) {
            this.totalNum = res.data?.all || 0;
          }
        }
      });
    },
    // 跳转到消息
    toMessage() {
      uni.navigateTo({
        url: "/pages/my/message/index",
      });
    },
    //搜索
    searchKeyword(e) {
      this.pageNo = 0;
      this.productList = [];
      this.getProductList();
    },
    convertArray(arr) {
      const result = [];
      for (let i = 0; i < arr.length; i += 10) {
        result.push(arr.slice(i, i + 10));
      }
      return result;
    },
    toPage() {
      uni.navigateTo({
        url: "/pages/points/pointsIndex",
      });
    },
    onLinks(url) {
      if (url === "") {
        return this.$msg("功能正在开发中");
      }
      uni.navigateTo({
        url: url,
      });
    },
    togo(data) {
      uni.navigateTo({
        url: "/pages/points/goodsDetails?productId=" + data.productId,
      });
    },
    // // 获取用户信息
    // getCustomerInfo() {
    //   customerInfo().then((res) => {
    //     this.userInfo = res.data || {};
    //     // 登录珺璟
    //     this.$store.commit("user/setUserInfo", res.data || {});
    //   });
    // },
    getProductArea() {
      productArea().then(async (res) => {
        if (res.code == 200) {
          this.dataListArea = res.data;
        }
      });
      this.productList = [];
    },
    getProductList() {
      this.status = "loading";
      this.pageNo++;
      let data = {
        pageNo: this.pageNo,
        pageSize: 10,
        keyword: this.keyword,
      };
      productList(data).then((res) => {
        if (this.pageNo === 1) {
          this.productList = res.data;
        } else {
          this.productList = this.productList.concat(res.data);
        }
        if (res.data.length < 10) {
          this.status = "nomore";
        }
      });
    },
    handleScrollStart() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.handleScrollEnd();
      }, 1000);
      this.right = -80;
      this.opacity = 0.3;
    },
    handleScrollEnd() {
      this.right = 10;
      this.opacity = 1;
      clearTimeout(this.timer);
    },
    handleProductList(item, index) {
      uni.navigateTo({
        url:
          "/pages/product/productList?cateId=" +
          item.cateId +
          "&tabIndex=" +
          (index + 1),
      });
    },
    // 取消下载
    cancelDownload() {
      this.$refs.popupAPP.close();
    },
    noNeed() {
      this.$refs.popupAPP.close();
      uni.showTabBar({});
    },
    // 后台下载
    houTaiDownload() {
      this.$refs.popupAPP.close();
    },
    // 获取服务端版本号
    getServerNo(version, isPrompt = false, callback) {
      lastVersion(1).then((res) => {
        let data = {
          versionCode: res.data.versionCode,
          versionName: res.data.versionName,
          versionInfo: res.data.versionContent,
          updateType: "solicit", // forcibly: 强制更新, solicit: 弹窗确认更新, silent: 静默更新
          downloadUrl: res.data.downloadUrl,
        };
        let that = this;
        plus.runtime.getProperty(plus.runtime.appid, function (inf) {
          if (data.versionCode <= inf.versionCode) {
            that.$refs.popupAPP.close();
            return;
          } else {
            that.downServerData = data;
            that.$refs.popupAPP.open();
          }
        });
      });
    },
    toGoodsList(data) {
      let that = this
      customerInfo().then((res) => {
        that.userInfo = res.data || {};
        // 登录珺璟
        that.$store.commit("user/setUserInfo", res.data || {});
      }).then(res => {
        if (data.advertising && that.userInfo.user.advertLevel > 0) {
          that.$msg("30天内限购一次");
          return;
        } else {
          uni.navigateTo({
            url:
              "/pages/product/productListZone?areaId=" +
              data.areaId +
              "&title=" +
              data.areaName,
          });
        }
      })
    },
    toProductDetails(item) {
      uni.navigateTo({
        url: "/pages/product/productDetails?productId=" + item.productId,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #f7f7f7;
}
.buyBtn {
  display: inline-block;
}
.swiper {
  height: 360rpx;
}
.swiperBox {
  width: 100%;
}
.message {
  position: relative;
}
.msgBox {
  position: absolute;
  top: -14rpx;
  right: -10rpx;
  z-index: 999;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  background-color: red;
  color: #ffffff;
  text-align: center;
  font-size: 12px !important;
  border-radius: 40rpx;
}
.swiper_my {
  margin-top: 20rpx;
  height: 240rpx;
}
.swiper-item_my {
  display: block;
}
.swiperImg {
  width: 100%;
  height: 240rpx;
  border-radius: 10rpx;
}
.borderMore {
  border: 1px solid #ffffff;
  border-radius: 30rpx;
  padding: 0rpx 20rpx;
  line-height: 44rpx;
}

.z-10 {
  z-index: 999;
}

.point-img {
  width: 140rpx;
  height: 160rpx;
}

.point {
  background: #ffffff;
  border-radius: 30rpx;
  padding: 2rpx 10rpx;
  top: 85%;
  left: 55%;
  min-width: 90%;
  transform: translate(-50%, -50%);
}

.boxItem {
  width: 22%;
  z-index: 10;
  color: #e60000;
}

.bg-img {
  top: 0;
  left: 0;
  z-index: 0;
  height: 290rpx;
}

.status-bar-h {
  height: var(--status-bar-height) !important;
  background-color: #e60000 !important;
  ::v-deep .top_view {
    background: #e60000 !important;
  }
}

.status-bar-h0 {
  height: 0px !important;
}

.cate-img {
  width: 69rpx;
  height: 69rpx;
}

.fixed-top-h {
  height: calc(66rpx - var(--status-bar-height));
}

.fixed-top {
  position: fixed;
  top: var(--status-bar-height);
  left: 0;
  right: 0;
  width: 100%;
  padding: 20rpx 30rpx;
  background: linear-gradient(139deg, #e60000, #ff6d6d);
  z-index: 9999999;
}

.popup {
  text-align: center;

  .box {
    margin: 0 auto;
    width: 70vw;
    max-width: 80vw;
    max-height: 65vh;
    // height: 65vh;
    padding: 30rpx;
    background-color: #fff;
    font-size: 26rpx;
    border-radius: 10rpx;

    image {
      width: 100%;
      margin-bottom: 40rpx;
      height: 100%;
    }
  }
}

.top-box {
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  padding-top: var(--status-bar-height);
  .search-box {
    padding-left: 20rpx;
    border-radius: 37rpx;
    background-color: #f7f7f7;
    box-sizing: border-box;
    height: 73rpx;
  }
  .search-text::placeholder {
    color: gray;
    font-size: 13px;
  }

  .search {
    width: 29rpx;
    height: 33rpx;
  }

  .search-text {
    // width: 474rpx;
    width: 100%;
    font-size: 26rpx;
    height: 73rpx;
    line-height: 80rpx !important;
    display: block;
  }

  .search-btn {
    width: 127rpx;
    background: linear-gradient(90deg, #fe6868, #f02a2a);
    border-radius: 37rpx;
    height: 66rpx !important;
    line-height: 66rpx !important;
    text-align: center;
    color: #fff;
    font-size: 34rpx;
    right: 4rpx;
    top: 6rpx;
    z-index: 99;
    position: absolute;
  }

  .kefu {
    width: 57rpx;
    height: 55rpx;
    margin-left: 14rpx;
  }
}

.zq-img {
  height: 160rpx;
}
.logoBox {
  width: 160rpx;
  height: 160rpx;
  position: absolute;
  top: 40rpx;
  right: 20rpx;
}
.logoBox1 {
  width: 90rpx;
  height: 90rpx;
}
.logoName {
  position: absolute;
  left: 10rpx;
  top: 40rpx;
}
.logoJoin {
  position: absolute;
  left: 10rpx;
  bottom: 60rpx;
}
.bg-Box {
  background: linear-gradient(to right, #f1eadf, #eca52b);
}
.zq-img view:last-child {
  display: inline-block;
}

.pmzq-img {
  width: 100%;
  height: 473rpx;
}

.jhzq-img {
  width: 100%;
  height: 190rpx;
}

.goods-item {
  width: calc(50% - 10rpx);
  overflow: hidden;

  .goods-img {
    width: 100%;
    height: 361rpx;
  }

  .proName {
    height: 100rpx;
  }

  .pro-sub {
    height: 172rpx;
  }

  .zq-label {
    background: #ff0000;
    border-radius: 4rpx;
    padding: 2rpx 8rpx;
    margin-right: 8rpx;
  }

  .gxz-lable {
    border: 2rpx solid #ff0000;
    border-radius: 8rpx;
    color: #ff0000;
    padding: 2rpx 8rpx;
    margin-left: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22rpx;
  }
}

.zIndex {
  z-index: 999;
}

.tab-box {
  color: #fff;

  > scroll-view {
    height: 60rpx;
    line-height: 60rpx;
    white-space: nowrap;

    .tab-item {
      display: inline-block;
      margin-right: 30rpx;
      font-size: 28rpx;
    }

    .tab-item-act {
      font-size: 32rpx;
      position: relative;

      &::after {
        position: absolute;
        bottom: 0rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        background: #fff;
        content: "";
        height: 4rpx;
      }
    }
  }
}
.height169 {
  height: 169rpx;
}
.height338 {
  height: 338rpx;
}
.swiper-box {
  background: #fff;
  border-radius: 16rpx;
  //height: 368rpx;
  padding: 0 22rpx;
  box-sizing: border-box;
  .swiper {
    padding: 29rpx 0 10rpx 0;
    .swiper-item {
      .swiper-item-cont {
        width: 20%;

        > image {
          width: 90rpx;
          height: 90rpx;
          background: #f0ffea;
          border-radius: 30rpx;
        }

        > view {
          text-align: center;
          margin-top: 10rpx;
          width: 120rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}

.dots-box {
  .dots {
    width: 45rpx;
    height: 6rpx;
    background: #f5f5f5;
    border-radius: 4rpx;
    margin: 0 6rpx;
  }

  .dots-act {
    width: 20rpx;
    height: 6rpx;
    background: #f95353;
  }
}
.guide-page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.boxJoin {
  display: inline-block;
}
</style>
